<template>
  <div ref="chartRef" :style="chartStyle"></div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-wordcloud";

export default {
  props: {
    chartStyle: {
      type: Object,
      default: () => ({}),
    },
    option: {
      type: Object,
      default: () => ({}),
    },
    events: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      chartInstance: null,
    };
  },
  watch: {
    option: {
      handler() {
        this.$nextTick(() => {
          this.ininChart();
        });
      },
      immediate: true,
    },
  },
  methods: {
    ininChart() {
      const chartInstance = echarts.init(this.$refs.chartRef);
      this.chartInstance = chartInstance;
      this.$nextTick(() => {
        chartInstance.setOption(this.option);
      });

      Object.keys(this.events).forEach((key) => {
        chartInstance.on(key, this.events[key]);
      });
      window.addEventListener("resize", this.resize);
    },
    resize() {
      setTimeout(() => {
        this.chartInstance.resize();
      }, 200);
    },
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resize);
  },
};
</script>
<style scoped></style>
